<template>
	<view class="container">
		<uni-card :is-shadow="true" :margin="20">
			<view class="form-container">
				<view class="form-item">
					<text class="label">反馈类型</text>
					<uni-data-checkbox v-model="type" :localdata="types" />
				</view>
				<view class="form-item">
					<text class="label">反馈内容</text>
					<textarea v-model="content" placeholder="请输入您的反馈内容" class="textarea" />
				</view>
				<button type="primary" @click="submit" class="submit-btn">提交反馈</button>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import feedbackApi from '../../api/feedback/index.js'
	export default {
		data() {
			return {
				type: 0,
				content: '',
				types: [{
						value: 0,
						text: '功能建议'
					},
					{
						value: 1,
						text: '界面问题'
					},
					{
						value: 2,
						text: '其他问题'
					}
				]
			}
		},
		methods: {
			submit() {
				if (this.content.trim() === '') {
					uni.showToast({
						title: '请输入反馈内容',
						icon: 'none'
					})
					return
				}
				uni.showModal({
						title: '提示',
						content: '确认提交反馈？',
						success: (res) => {
							if (res.confirm) {
								feedbackApi.saveFeedback({
									type: this.type,
									content: this.content
								}).then(res => {
									if (res.data == null) {
										uni.showToast({
											title: '反馈提交成功',
											icon: 'success'
										})
										this.content = ''
										this.adviceType = 0
									}
								})
							}else if (res.cancel) {
								uni.showToast({
									title: '提交取消',
									icon: 'none'
								})
							}
						}
					})
				}
			}
		}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
	}

	.form-container {
		padding: 20rpx;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.label {
		display: block;
		margin-bottom: 10rpx;
		font-size: 28rpx;
		color: #666;
	}

	.textarea {
		width: 100%;
		height: 300rpx;
		padding: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.submit-btn {
		margin-top: 40rpx;
	}
</style>